<template>
  <el-dialog title="高级查询" :visible.sync="showSearch" @close="cancel" width="60%" append-to-body>
    <el-form ref="form" :model="queryParam" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="总部编号" prop="zbbh">
            <el-input v-model="queryParam.zbbh" placeholder="请输入总部编号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户" prop="kh">
            <el-input v-model="queryParam.kh" placeholder="请输入客户" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="地址" prop="dz">
            <el-input placeholder="请选择地址" v-model="queryParam.dz"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下场时间" prop="dz">
            <el-date-picker clearable
                            style="width: 100%"
                            v-model="queryParam.xcsj"
                            @change="handleChangeXcsj"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择下场时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="检测方式" prop="jcfs">
            <el-radio-group v-model="queryParam.jcfs">
              <el-radio :label="'1'">下场</el-radio>
              <el-radio :label="'2'">送检</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="送检状态">
            <el-select v-model="queryParam.sjzt" style="width: 100%;" placeholder="请选择">
              <el-option
                v-for="item in sjztList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否已下场" prop="sfyxc">
            <el-checkbox-group v-model="sfyxc" @change="selectSfyxc">
              <el-checkbox v-for="item in sfList" :label="item.dictValue">{{item.dictLabel}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否回款" prop="sfhk">
            <el-checkbox-group v-model="sfhk" @change="selectSfhk">
              <el-checkbox v-for="item in hkList" :label="item.dictValue">{{item.dictLabel}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="回款金额" prop="hkje">
            <el-input v-model="queryParam.params.minJe" :min="0" type="number" style="width: 150px" placeholder="最小值" />
            &nbsp; - &nbsp;
            <el-input v-model="queryParam.params.maxJe" :min="0" type="number" style="width: 150px" placeholder="最大值" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回款日期" prop="hksj">
            <el-date-picker
              v-model="hkrqData"
              @change="selectHkTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="录入人" prop="createBy">
            <el-input v-model="queryParam.createBy" placeholder="请输入录入人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="录入时间" prop="createTime">
            <el-date-picker clearable
                            style="width: 100%"
                            v-model="queryParam.createTime"
                            type="datetime"
                            @change="handleChangeCreateTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择录入时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="query">查 询</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'Search',
  props: {
    showSearch: {
      type: Boolean
    },
    param: {
      type: Object
    },
    sfList: {
      type: Array
    },
    hkList: {
      type: Array
    },
    sjztList: {
      type: Array
    }
  },
  data() {
    return {
      queryParam: {},
      sfhk: [],
      sfyxc: [],
      xcList: [],
      hkrqData: []
    }
  },
  created() {
    // 初始化数据
    this.init()
  },
  methods: {
    init() {
      // this.queryParam = this.param
      this.$set(this, 'queryParam', this.param)
      this.queryParam.params = {}
      if (this.param.sfyxc !== undefined) {
        this.sfyxc = this.param.sfyxc.split(",")
      }
      if (this.param.sfhk !== undefined) {
        this.sfhk = this.param.sfhk.split(",")
      }
    },
    selectHkTime(time) {
      this.queryParam.params.startHkTime = time[0]
      this.queryParam.params.endHkTime = time[1]
    },
    handleChangeXcsj(val) {
      let sj = val.split(" ")[0]
      this.queryParam.startXcsj = sj + " 00:00:00"
      this.queryParam.endXcsj = sj + " 23:59:59"
    },
    handleChangeCreateTime(val) {
      let sj = val.split(" ")[0]
      this.queryParam.startCreateTime = sj + " 00:00:00"
      this.queryParam.endCreateTime = sj + " 23:59:59"
    },
    selectSfyxc(val) {
      this.queryParam.sfyxc = val.toString()
    },
    selectSfhk(val) {
      this.queryParam.sfhk = val.toString()
    },
    cancel() {
      this.hkrqData = []
      this.queryParam =  {
        params: {
          startHkTime: '',
          endHkTime: '',
          minJe: 0,
          maxJe: 0
        }
      }
      this.$emit("closeSearch")
    },
    query() {
      this.$emit("search", this.queryParam)
    }
  }
}
</script>

<style scoped>

</style>
